<?php
/**
 * TomatoCMS
 * 
 * LICENSE
 *
 * This source file is subject to the GNU GENERAL PUBLIC LICENSE Version 2 
 * that is bundled with this package in the file LICENSE.txt.
 * It is also available through the world-wide-web at this URL:
 * http://www.gnu.org/licenses/gpl-2.0.txt
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@tomatocms.com so we can send you a copy immediately.
 * 
 * @copyright	Copyright (c) 2009-2010 TIG Corporation (http://www.tig.vn)
 * @license		http://www.gnu.org/licenses/gpl-2.0.txt GNU GENERAL PUBLIC LICENSE Version 2
 * @version 	$Id: show.phtml 5174 2010-08-30 10:57:01Z huuphuoc $
 * @since		2.0.0
 */
?>
<div class="featured" id="project-featured">
    <?php if ($this->articles && count($this->articles) > 0) : ?>
        <div class="f-thumbnail">
        <?php
        foreach ($this->articles as $article) {
        ?>
            <img width="390px" height="215px" src="<?php echo $article->image_thumbnail ?>" alt="<?php $article->title ?>"/>
        <?php
        }
        ?>
    </div>
    <div class="f-list">
        <h2><?php echo $this->translate()->widget('project_featured_list_title'); ?></h2>
        <dl>
            <?php
            foreach ($this->articles as $article) {
            ?>
                <dt><a href="<?php echo $this->url($article->getProperties(), 'news_article_details') ?>"><?php echo $article->title ?></a></dt>
                <dd><?php echo $article->summary ?></dd>
            <?php
            }
            ?>
        </dl>
    </div>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#project-featured .f-thumbnail img').eq(0).addClass('current');
            $('#project-featured .f-list dt').eq(0).addClass('current');
            var currentIndex = 0;
            var gallery = setInterval('gallery()',4000);
            $('#project-featured .f-list dt').hover(function(){
                var index = $(this).index() / 2;
                if( !$('#project-featured .f-thumbnail img').eq(index).hasClass('current')){
                    currentIndex = $('#project-featured .f-thumbnail img.current').index();
                    $('#project-featured .f-thumbnail img.current').animate({opacity: 0.0}, 1000).removeClass('current');
                    $('#project-featured .f-thumbnail img')
                    .eq(index)
                    .addClass('current')
                    .animate({opacity: 1.0}, 1000);
                    clearInterval(gallery);
                }
            }, function(){
                var index = $(this).index() / 2;
                if(index != currentIndex){
                    $('#project-featured .f-thumbnail img.current').animate({opacity: 0.0}, 1000).removeClass('current');
                    $('#project-featured .f-thumbnail img')
                    .eq(currentIndex)
                    .addClass('current')
                    .animate({opacity: 1.0}, 1000);
                    gallery = setInterval('gallery()',4000);
                }
            });
            //Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
            
        });
        function gallery() {
            //if no IMGs have the show class, grab the first image
            var numberImage = $('#project-featured .f-thumbnail img').length;
            var current = ($('#project-featured .f-thumbnail img.current') ?  $('#project-featured .f-thumbnail img.current') : $('#project-featured .f-thumbnail img').eq(0));

            //Get next image, if it reached the end of the slideshow, rotate it back to the first image
            var next = ((current.index() == numberImage - 1) ? $('#project-featured .f-thumbnail img').eq(0) : current.next());

            //Set the fade in effect for the next image, show class has higher z-index
            next.css({opacity: 0.0})
            .addClass('current')
            .animate({opacity: 1.0}, 1000);

            //Hide the current image
            current.animate({opacity: 0.0}, 1000)
            .removeClass('current');

        }
    </script>
    <?php endif; ?>
</div>